<script setup>
import { ref } from 'vue';
import { Edit, Delete } from '@element-plus/icons-vue';
import { getMenuListService, menuDeleteService } from '@/apis/system-manage';
import { CommonElePlusTableEventHandler as TableEventHandler } from '@/utilities/tableeventhandle';
import MenuEdit from './components/MenuEdit.vue';

const params = ref({
  menuName: ''
});

const loading = ref(false);

const menuList = ref([]);
const getMenuList = async () => {
  loading.value = true;
  let res = await getMenuListService(params.value);
  menuList.value = res.data;

  loading.value = false;
};

getMenuList();

const tableEventHanler = new TableEventHandler(params, getMenuList);

const onSearch = tableEventHanler.onSearch;
const onReset = tableEventHanler.onResetFunc(() => {
  params.value.menuName = '';
});

let menuEditRef = ref();
const onEditMenu = (row) => {
  menuEditRef.value.open(row.id);
};

// 删除菜单
const confirmDialogVisible = ref(false);
const toDeleteItem = ref({});
const onDeleteMenu = (row) => {
  toDeleteItem.value = row;
  confirmDialogVisible.value = true;
};
const doDeleteMenu = async () => {
  loading.value = true;
  let res = await menuDeleteService({ ids: [toDeleteItem.value.id] });
  loading.value = false;
  ElMessage.success(res.msg);
  confirmDialogVisible.value = false;
  getMenuList();
};

const onFinishEdit = getMenuList;
</script>

<template>
  <page-container title="菜单管理">
    <template #extra>
      <el-button @click="onEditMenu('')">添加菜单</el-button>
    </template>

    <!--表单区域-->
    <el-form inline>
      <el-form-item label="分类名称">
        <el-input v-model="params.menuName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table
      :data="menuList"
      row-key="id"
      v-loading="loading"
      :tree-props="{ children: 'children' }"
      default-expand-all
    >
      <el-table-column prop="menuName" label="菜单名称"></el-table-column>
      <el-table-column prop="menuPath" label="菜单路径"></el-table-column>
      <el-table-column prop="menuIcon" label="图标">
        <template #default="scope">
          <div class="menuicon-container">
            <el-icon>
              <component :is="scope.row.menuIcon || 'Minus'"></component>
            </el-icon>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="sortNum" label="排序号"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button
            circle
            plain
            type="primary"
            :icon="Edit"
            @click="onEditMenu(row)"
          ></el-button>
          <el-button
            circle
            plain
            type="danger"
            :icon="Delete"
            @click="onDeleteMenu(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </page-container>

  <menu-edit ref="menuEditRef" @finishEdit="onFinishEdit"></menu-edit>

  <el-dialog v-model="confirmDialogVisible" title="提示" width="30%">
    <span class="dialog-span">
      是否确定删除菜单：
      <strong>{{ toDeleteItem && toDeleteItem.menuName }}</strong>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="confirmDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="doDeleteMenu()">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style scoped>
.menuicon-container {
  display: flex;
  align-items: center;
  font-size: 25px;
}
.dialog-span {
  font-size: 16px;
}
</style>
